<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>监视的简写</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>

    
        <div id ="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
            <br/><br/>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热':'凉爽'
                    }
                },
                methods: {
                    changeWeather(){
                        this.isHot = !this.isHot
                    }
                },
                //监视属性
                watch:{
                    //第一种：完整写法
                    //监视的属性名
                    isHot:{
                        //immediate:true, //默认false--作用：初始化时就调用handler方法
                        //deep:true, //开启深度监视
                        //handler:在isHot发生改变时调用，并携带新值和旧值
                        handler(newValue,oldValue){
                            console.log('isHot被修改了！',newValue,oldValue)
                        }
                    },
                    //第二种：简写--当只需要handler的时候才能简写
                    info(newValue,oldValue){
                        console.log('info被修改了！',newValue,oldValue)
                    }
                }
            
            })

            //第一种：正常写法
            vm.$watch('isHot',{
                //immediate:true, //默认false--作用：初始化时就调用handler方法
                //deep:true, //开启深度监视
                //handler:在isHot发生改变时调用，并携带新值和旧值
                handler(newValue,oldValue){
                    console.log('isHot被修改了！',newValue,oldValue)
                }
            })

            //第二种：简写
            vm.$watch('isHot',function(newValue,oldValue){
                console.log('isHot被修改了！',newValue,oldValue)
            })
           
        </script>

        
    </body>
</html>